<%@ page language="java" contentType="text/html;charset=UTF-8" %>
<%@ include file="../../../inc/global.jsp" %><%@ include file="../../top.jsp" %>
<compress:html compressCss="true" compressJavaScript="true" enabled="true" >
<!doctype html>
<html>
<head>
<title><fmt:message key="jsp.title.mall.admin.product.item.spu"/></title>
<%@ include file="../head.jsp" %>
<style type="text/css">
table tr td {cursor:pointer;}
table tr td em {display: inline-block; margin: 0 3px; color:#000;}
#spuName {width:360px;}
.btn {
    width: 80px;
    max-width: 80px;
    display: inline-block;
}
.btn a, .btn a:link, .btn a:visited {
    display: inline-block;
    width: 80px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    background: #ffe45c;
    -moz-border-radius: 1px;
    border-radius: 1px;
    cursor: pointer;
}
</style>
<script type="text/javascript">
$(function() {
    tableTrMouseOver($('table tr'));
    defaultKeys('spuName');
    $("#spuName")
        // don't navigate away from the field on tab when selecting an item
            .bind("keydown", function (event) {
                if (event.keyCode === $.ui.keyCode.TAB &&
                        $(this).data("ui-autocomplete").menu.active) {
                    event.preventDefault();
                }
            })
            .autocomplete({
                create: function () {

                },
                source: function (request, response) {
                    $.ajax({
                        url: "/mall/ajax/search/spu/searcher",
                        type: "GET",
                        dataType: "json",
                        data: {
                            r: 111,
                            q: request.term
                        },
                        success: function (json) {
                            //var json = $.parseJSON(data);
                            response($.map(json.data, function (item) {
                                return {
                                    label: (item.brand.name +' ' + item.name + ' ' + item.displayName),
                                    value: (item.name),
                                    name: item.name,
                                    id: item.id,
                                    displayName: item.displayName,
                                    brandName: item.brand.name
                                }
                            }));
                        },
                        error: function () {
                            alert(MSG.AJAX_ERR);
                        }
                    });

                },
                minLength: 3,
                /*focus: function() {
                 // prevent value inserted on focus
                 return false;
                 },*/
                select: function (event, ui) {
                    window.location = 'create?spuId=' + ui.item.id;
                    return false;
                }
            });
});// all ready
</script>
</head>
<body>
<div id="dialog-confirm">

</div>
<div class="main">
    <div class="wrapper">
        <%@include file="../../header.jsp" %>
        <%@include file="../sidebar.jsp"%>
        <!-- sidebar end -->
        <div class="content item-form">
            <div class="menu-tab">
                <ul>
                    <li><a href="/mall/adm/product/inventory"><fmt:message
                            key="jsp.menu-tab.mall.admin.product.inventory.list"/></a></li>
                    <li class="slt"><a href="/mall/adm/product/inventory/items"><fmt:message
                            key="jsp.menu-tab.mall.admin.product.inventory.spu"/></a></li>
                </ul>
            </div>
            <table>
                <tr>
                    <th>
                        <input type="text" id="spuName" name="spuName" value="请选择所要入库的商品，或者在这里搜索商品名称。"/>
                        <div class="btn"><a href="###">搜索</a></div>
                    </th>
                    <th style="text-align:center; width:30px"></th>
                </tr>
                <c:forEach var="item" items="${items}">
                <tr>
                    <td>
                    <c:forEach var="nav" items="${item.navList}"><em>${nav.name}</em>|</c:forEach>
                    ${item.brand.name} |
                    ${item.name} |
                    ${item.displayName} |
                    <c:forEach var="attrVal" items="${item.attrValList}"><em>${attrVal.alias}</em>|</c:forEach>
                    </td>
                    <td style="text-align:center;"><a href="/mall/adm/product/inventory/create?spuId=${item.id}">入库</a></td>
                </tr>
                </c:forEach>
            </table>
        </div>
    </div>
</div>
</body>
</html>
<%@ include file="../../bottom.jsp" %>
</compress:html>